<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2020-03-13 13:35:55
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .van-search {
            /* background: transparent !important; */
            padding: 6px 0;
            border-bottom: 1px solid #ebedf0;
        }

        /* .van-search__content {
             background: transparent
         } */

        .van-search__action {
            color: #cd1b21;
            font-size: 13px;
            font-weight: 700;
        }

        .result {
            position: absolute;
            left: 0;
            top: 47px;
            bottom: 0;
            right: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .mt {
            margin-top: 10px;
        }

        .border {
            border-right: 1px solid #ebedf0;
        }

        .label {
            line-height: 22px;
            text-align: center;
            font-weight: 500;
            font-size: 13px;
            color: #969799;
            padding: 8px 0;
        }

        .label .label-value {
            color: #3a3a3a;
            font-size: 14px;
        }

        .van-panel__header-value {
            color: #969799;
        }

        .un .van-panel__header-value {
            color: #cd1b21;
        }

        .van-cell__title {
            max-width: 90px;
        }

        .dis .van-cell__title {
            color: #9e9e9e;
        }

        /* .van-cell__value {
            text-align: right;
        } */

        .tab {
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 130px;
            padding-left: 10px;
            height: 47px;
            line-height: 55px;
            background: rgb(255, 255, 255);
            border-bottom: 1px solid #ebedf0;
        }

        .tab .t-d {
            font-size: 0;
            border-radius: 6px;
        }

        .tab .t-d>div {
            display: inline-block;
            width: 55px;
            text-align: center;
            height: 24px;
            font-size: 13px;
            border: 1px solid #cd1b21;
            line-height: 22px;
        }

        .tab .t-d>div.on {
            background: #cd1b21;
            color: #fff;
            line-height: 22px;
        }

        .total {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 50px;
            width: 100%;
            padding: 0 15px;
            line-height: 50px;
            font-size: 14px;
            background: #fff;
            box-shadow: 0 0 5px rgb(200, 198, 198);
        }

        .money {
            font-size: 16px;
            font-weight: 700;
            color: #cd1b21;
            margin-left: 15px;
        }

        .elp {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 200px;
        }

        .van-field__right-icon {
            position: absolute;
            top: -10px;
            right: 0;
            bottom: -10px;
            line-height: 44px;
            padding: 0 12px;
            background: #fff;
        }

        textarea {
            padding-right: 30px !important;
        }

        .van-field__control:disabled {
            color: #000000;
        }

        .van-cell {
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full" @click="clickDom($event)">
            <van-nav-bar class="head" title="客户详情" left-arrow @click-left="onClickLeft">
                <div slot="right" class="head-right">
                    <span @click.stop="openNavigation" v-show="!fromVisit">
                        <img src="../image/navigation.png" />
                    </span>
                    <span @click.stop="showMenu = !showMenu">
                        <img src="../image/menu.png" />
                    </span>
                </div>
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <van-cell title="客户名称" :value="customerData.name" class="dis"></van-cell>
                    <van-cell title="客户编号" :value="customerData.code" class="dis"></van-cell>
                    <van-cell title="客户类别" :value="customerData.TrName" class="dis"></van-cell>
                    <van-cell title="会员套餐" :value="customerData.SetMealName || ' '" class="dis" is-link @click="showMeal = true;"></van-cell>
                    <van-field style="margin-top: 10px;" v-model="customerData.LinkMan" clearable label="联系人"
                        placeholder="请填写联系人"></van-field>
                    <van-field v-model="customerData.NTel" clearable label="联系方式" placeholder="请填写联系方式"></van-field>

                    <van-field type="textarea" rows="1" :autosize="{minHeight:24}" v-model="customerData.Address"
                        clearable label="详细地址" right-icon="location" placeholder="请填写详细地址">
                        <div slot="right-icon" @click="openMap">
                            <van-icon name="location"></van-icon>
                        </div>
                    </van-field>
                    <van-field
                        :value="customerData.Distance < 1?(customerData.Distance*1000 + '米'):(customerData.Distance + '千米')"
                        label="送达距离" disabled>
                        <van-button slot="button" size="small" type="primary" @click="getDistance">计算距离</van-button>
                    </van-field>
                    <van-cell title="所属区域" :value="customerData.ARName" @click="openAreas" is-link></van-cell>

                    <van-cell style="margin-top:10px;" title="当前应收" :value="customerData.AXMoney" class="dis">
                    </van-cell>
                    <div class="btn-padding" v-show="!fromVisit">
                        <van-button block type="primary" @click="saveCustomerData">保存</van-button>
                    </div>
                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>

        <div class="head-menu" v-if="showMenu">
            <img class="menu-arrow" src="../image/menu-arrow.png" />

            <div @click="openGoodsShelves">
                <img src="../image/module/module-15.png" />
                <span>货架查询</span>
            </div>
            <div @click="openConsignmentInventory">
                <img src="../image/module/module-10.png" />
                <span>代销库存</span>
            </div>
            <div @click="openCustomer" v-show="customerData.IsOPAP==0">
                <img src="../image/module/module-23.png" />
                <span>开通账户</span>
            </div>
            <div @click="sendHB" v-if="hbList.length">
                <img src="../image/module/module-14.png" />
                <span>赠送红包</span>
            </div>
            <div @click="setMeal">
                <img src="../image/module/module-14.png" />
                <span>设置会员套餐</span>
            </div>
        </div>

        <van-popup v-model="showArea" position="bottom">
            <van-picker show-toolbar :columns="areas" value-key="name" @cancel="showArea = false" @confirm="areaChange">
            </van-picker>
        </van-popup>

        <van-popup v-model="showHB" position="bottom">
            <van-picker show-toolbar :columns="hbList" value-key="sname" @cancel="showHB = false"
                @confirm="hbChange"></van-picker>
        </van-popup>
        <van-popup v-model="showMeal" position="bottom">
            <van-picker show-toolbar :columns="mealList" value-key="SetMealName" @cancel="showMeal = false"
                @confirm="mealChange"></van-picker>
        </van-popup>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();


        var maps = [
            ['高德地图', 'iosamap://', 'com.autonavi.minimap'],
            ['百度地图', 'baidumap://', 'com.baidu.BaiduMap']
        ];
        var buttons = [];

        api.addEventListener({
            name: 'setCustomerData'
        }, function (ret, err) {
            vm.customerData = ret.value.customerData

        })

        var map = api.require('bMap');
        if (api.systemType == 'android') {
			map.setAgreePrivacy({
			    agree:true
		    });	
		}
        // if (api.systemType == 'ios') {
        map.initMapSDK(function (ret) { });
        // }

        var fromVisit = api.pageParam.fromVisit || false;

        // alert(JSON.stringify(api.pageParam.customerData))

        var userInfo = FLD.getUserInfo();
        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                ifConfirm: false,
                showMenu: false,
                showArea: false,
                showHB: false,
                showMeal: false,
                fromVisit: fromVisit,
                areas: [],
                hbList: [],
                mealList:[],
                customerData: api.pageParam.customerData
            },
            created: function () {
                this.appInstalled();
                this.getAreas();
                this.getHB();
                this.getMealList();
            },
            methods: {
                clickDom(e) {
                    if (!$(e.target).closest('.head-menu').length) {
                        this.showMenu = false;
                    }
                },
                getMealList() {
                    var that = this;
                    FLD.ajax('SetMealList', {}, function (res) {
                        for(var i in res.ds){
                            var str = '';
                            if(res.ds[i].GiftType == 0){
                                str = res.ds[i].GiftValue + '元抵扣';
                            }else{
                                str = res.ds[i].GiftValue*10 + '折优惠';
                            }
                            res.ds[i].sname = res.ds[i].GiftName + '【'+ str +'】';
                        }
                        that.mealList = res.ds;
                    })
                },
                getHB() {
                    var that = this;
                    FLD.ajax('GiftTypeList', { S_BranchID: that.customerData.branchID || '' }, function (res) {
                        for(var i in res.ds){
                            var str = '';
                            if(res.ds[i].GiftType == 0){
                                str = res.ds[i].GiftValue + '元抵扣';
                            }else{
                                str = res.ds[i].GiftValue*10 + '折优惠';
                            }
                            res.ds[i].sname = res.ds[i].GiftName + '【'+ str +'】';
                        }
                        that.hbList = res.ds;
                    })
                },
                mealChange(value, index) {
                    var that = this;
                    that.showMeal = false;
                    this.$dialog.confirm({
                        title: '提示',
                        message: '是否设置为' + that.mealList[index].SetMealName + '?'
                    }).then(() => {
                        FLD.ajax('AssetDisscount', { CDPriceSetMealID: that.mealList[index].CDPriceSetMealID,ClientID:that.customerData.id }, function (res) {
                            that.$toast('设置成功!');
                            that.customerData.SetMealName = that.mealList[index].SetMealName;
                            that.customerData.SetMealID = that.mealList[index].CDPriceSetMealID;
                            that.setCustomerListData();
                        })
                    }).catch(() => {

                    });
                },
                hbChange(value, index) {
                    var that = this;
                    that.showHB = false;
                    var str = '';
                    if (that.hbList[index].GiftType == 0) {
                        str = that.hbList[index].GiftValue + '元现金抵用券';
                    } else {
                        str = that.hbList[index].GiftValue * 10 + '折抵扣券';
                    }
                    this.$dialog.confirm({
                        title: '提示',
                        message: '是否赠送' + that.customerData.name + '一张' + str + '?'
                    }).then(() => {
                        FLD.ajax('SendClientGift', { GiftID: that.hbList[index].GiftID,S_ClientID:that.customerData.id }, function (res) {
                            that.$toast('赠送成功!');
                        })
                    }).catch(() => {

                    });
                },
                getAreas() {
                    var that = this;
                    var obj = {
                        S_Type: 103,
                        S_Cont: that.customerData.id,
                        S_BranchID: userInfo.S_BranchID,
                        S_SXZ: '',
                        S_StockID: userInfo.S_StockID,
                        S_CargoID: userInfo.S_CargoID,
                        S_BarCode: '',
                        S_PriceN: userInfo.S_PriceN,
                        S_ProductID: 0
                    }
                    FLD.ajax('AP_BasList', obj, function (res) {
                        that.areas = res.ds;
                    })
                },
                appInstalled(num) {
                    var that = this;
                    if ((num = num ? num : 0) < maps.length) {
                        api.appInstalled({
                            appBundle: api.systemType == 'ios' ? maps[num][1] : maps[num][2]
                        }, function (ret, err) {
                            if (ret.installed) {
                                buttons.push(maps[num][0]);
                                maps[num].push(false);
                            } else {
                                buttons.push(maps[num][0] + ' ( 未安装 )');
                                maps[num].push(true);
                            }
                            that.appInstalled(++num);
                        });
                    }
                },
                openAreas() {
                    var that = this;
                    if (that.areas.length) {
                        that.showArea = true;
                    } else {
                        layer.open({
                            content: '暂无区域可选!',
                            skin: 'msg',
                            time: 2
                        });
                    }
                },
                areaChange(value, index) {
                    var that = this;
                    that.customerData.ARName = that.areas[index].name;
                    that.showArea = false;
                },
                getDistance() {
                    var that = this;
                    if (!that.customerData.C_Longitude || !that.customerData.C_Latitude) {
                        layer.open({
                            content: '请先保存仓库定位!',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!that.customerData.Longitude || !that.customerData.Latitude) {
                        layer.open({
                            content: '请先保存客户定位!',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    map.searchRoute({
                        id: 1,
                        type: 'drive',
                        policy: 'ecar_dis_first',
                        start: {
                            lon: that.customerData.C_Longitude,
                            lat: that.customerData.C_Latitude
                        },
                        end: {
                            lon: that.customerData.Longitude,
                            lat: that.customerData.Latitude
                        }
                    }, function (ret, err) {
                        if (ret.status) {
                            layer.open({
                                content: '计算成功!',
                                skin: 'msg',
                                time: 2
                            });
                            that.customerData.Distance = (ret.plans[0].distance / 1000).toFixed(2);
                        }
                    });
                },
                openMap() {
                    var that = this;
                    api.openWin({
                        name: 'customersLocation',
                        url: 'customersLocation.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            customerData: that.customerData,
                            saveType: '客户'
                        }
                    })
                },
                openNavigation() {
                    var that = this;

                    if (that.customerData.Longitude && that.customerData.Latitude) {
                        api.actionSheet({
                            buttons: buttons
                        }, function (ret, err) {
                            ret.buttonIndex -= 1;
                            if (ret.buttonIndex == 2) {
                                return false;
                            } if (!maps[ret.buttonIndex][3]) {
                                if (ret.buttonIndex == 0) {
                                    var gd_latlng = that.bd_decrypt(that.customerData.Longitude, that.customerData.Latitude);
                                    if (api.systemType == 'ios') {
                                        location.href = encodeURI('iosamap://path?sourceApplication=福路德&dlat=' + gd_latlng.lat + '&dlon=' + gd_latlng.lng + '&dev=0&t=0');
                                    } else {
                                        location.href = encodeURI('amapuri://route/plan/?sourceApplication=福路德&dlat=' + gd_latlng.lat + '&dlon=' + gd_latlng.lng + '&dev=0&t=0');
                                    }
                                } else if (ret.buttonIndex == 1) {
                                    if (api.systemType == 'ios') {
                                        location.href = encodeURI('baidumap://map/direction?destination=' + that.customerData.Latitude + ',' + that.customerData.Longitude + '&mode=driving&src=ios.baidu.福路德连锁');
                                    } else {
                                        location.href = encodeURI('bdapp://map/direction?destination=' + that.customerData.Latitude + ',' + that.customerData.Longitude + '&mode=driving&src=andr.baidu.福路德连锁');
                                    }
                                }
                            }
                        })
                    } else {
                        layer.open({
                            content: '请先保存客户定位!',
                            skin: 'msg',
                            time: 2
                        });
                    }
                },
                saveCustomerData() {
                    var that = this;
                    var obj = {
                        S_ClientID: that.customerData.id,
                        S_LinkMan: that.customerData.LinkMan,
                        S_Tel: that.customerData.NTel,
                        S_Address: that.customerData.Address,
                        S_Longitude: that.customerData.Longitude,
                        S_Latitude: that.customerData.Latitude,
                        S_Distance: that.customerData.Distance,
                        S_ARName: that.customerData.ARName
                    }
                    FLD.ajax('APP_UPTClientN', obj, function (res) {
                        that.setCustomerListData();
                        layer.open({
                            content: '保存成功!',
                            skin: 'msg',
                            time: 2
                        });
                    })
                },
                bd_decrypt(bd_lng, bd_lat) {
                    var X_PI = 3.14159265358979324 * 3000.0 / 180.0;
                    var x = bd_lng - 0.0065;
                    var y = bd_lat - 0.006;
                    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
                    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
                    var gg_lng = z * Math.cos(theta);
                    var gg_lat = z * Math.sin(theta);
                    return { lng: gg_lng, lat: gg_lat }
                },
                openGoodsShelves() {
                    var that = this;
                    that.showMenu = false;
                    api.openWin({
                        name: 'goodsShelves',
                        url: 'goodsShelves.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            clientInfo: that.customerData
                        }
                    })
                },
                openConsignmentInventory() {
                    var that = this;
                    that.showMenu = false;
                    api.openWin({
                        name: 'consignmentInventory',
                        url: 'consignmentInventory.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            clientInfo: that.customerData
                        }
                    })
                },
                openCustomer() {
                    var that = this;
                    that.showMenu = false;
                    this.$dialog.confirm({
                        title: '提示',
                        message: '是否开通此客户?'
                    }).then(() => {
                        that.ifConfirm = true;
                        var obj = {
                            S_ClientID: that.customerData.id,
                            S_BranchID: userInfo.S_BranchID
                        }
                        FLD.ajax('AP_ADClientNI', obj, function (res) {
                            that.ifConfirm = false;
                            if (res.ds[0].status == 500) {
                                layer.open({
                                    content: res.ds[0].msg,
                                    skin: 'msg',
                                    time: 2
                                });
                            } else {
                                that.customerData.IsOPAP = 1;
                                layer.open({
                                    content: '客户启用成功!',
                                    skin: 'msg',
                                    time: 2
                                });
                                that.setCustomerListData();
                            }
                        })

                    }).catch(() => {

                    });

                },
                sendHB() {
                    var that = this;
                    that.showMenu = false;
                    that.showHB = true;
                },
                setMeal() {
                    var that = this;
                    that.showMenu = false;
                    that.showMeal = true;
                },
                setCustomerListData() {
                    var that = this;
                    api.sendEvent({
                        name: 'setCustomerListData',
                        extra: {
                            customerData: that.customerData
                        }
                    });
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>